[#ftl]
[@define "agile.TextShadowEditor","agile._MetadataEditor" "MultiSelect=dijit/form/MultiSelect"]
	[#assign templateString][#compress]
	<table cellspacing="1px">
		<tr>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="hShadow" data-dojo-props='options:"0",unit:"px",placeHolder:"horizental"' title="{i18n_h_shadown_tooltip}"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="vShadow" data-dojo-props='options:"0",unit:"px",placeHolder:"vertical"' title="{i18n_v_shadown_tooltip}"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="blur" data-dojo-props='options:"0",unit:"px",placeHolder:"blur"' title="{i18n_shadow_blur_tooltip}"></div></td>
		<td valign="top"><div data-dojo-type='agile.ColorSelector' data-dojo-attach-point="color" title="{i18n_shadow_color_tooltip}"></div></td>
		<td>&nbsp;</td>
		<td><img class='agileButton agileButtonAdd' data-dojo-attach-point="addButton"></img></td>
		<td><img class='agileButton agileButtonRemove' data-dojo-attach-point="removeButton"></img></td>
		</tr>
		<tr><td colspan="7"><select data-dojo-attach-point="shadowOptions" multiple="false" data-dojo-type="dijit/form/MultiSelect" style="width:100%;height:60px"></select></td></tr>
	</table>[/#compress]  
	[/#assign]
	templateString:"${templateString?js_string}",htmlName:"text-shadow",name:"textShadow"	
	,init:function(){
		this.isOnChangeActive = true;
		array.forEach(["hShadow","vShadow","blur","color"],function(name){
			aspect.after(this[name],"onChange",lang.hitch(this,function(value){
				if(this.isOnChangeActive && this.isValid()){
					var value = this.get("value");
					if(value == ""){
						this.onChange(this.getShadow(),this.name,this.htmlName);
					}else{
						this.onChange(this.getShadow() + "," + value,this.name,this.htmlName);	
					}
					
				}
			}),true);
		},this);
		
		this.own(on(this.addButton,"click",lang.hitch(this,function(){
			if(this.isValid()){
				var value = this.getShadow();
				if(!this.shadowOptions.hasOption(value)){
					this.shadowOptions.addOption([{label:value,value:value}]);
				}
				this.onChange(this.get("value"),this.name,this.htmlName);
			}
		})));
		this.own(on(this.removeButton,"click",lang.hitch(this,function(){
//			var value = this.getShadow();
//			this.shadowOptions.removeValue(value);
//			this.onChange(this.get("value"),this.name,this.htmlName);
//			this.setShadow();
			//clear all selected options			
			array.forEach(this.shadowOptions.get('value'),function(value){
				this.shadowOptions.removeValue(value);
			},this);
			this.onChange(this.get("value"),this.name,this.htmlName);
			this.clearShadow();
		})));		

		aspect.after(this.shadowOptions,"onChange",lang.hitch(this,function(values){
			//preview on the selected shadows
			var style = values[0];
			for(var i = 1; i < values.length; i++){
				style += ","+values[i];
			}			
			this.preview(style,this.name,this.htmlName);
			
			//set the first shadow in the editor
			this.setShadow(values[0]);
		}),true);	
		
	}	
	,get:function(name){
		if(name == "value"){
			//return this.hShadow.get("value") +" "+ this.vShadow.get("value")+" "+ this.blur.get("value")+" "+ this.color.get("value");
//			var value = "";
//			var options = this.shadowOptions.getOptions();//this.shadowOptions.containerNode.options;
//			if(options.length > 0){
//				value = options[0].value;
//				for(var i = 1; i < options.length; i++){
//					value += "," + options[i].value;
//				}
//			}
//			return value.trim();
			return this.shadowOptions.getValues();
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){
//			//console.log("TextShadowEditor set value=",value[this.htmlName]);
			//this.shadowOptions.clearOptions();
			var v = value[this.htmlName];
			if(v){
				var options = v.split(","),_options = [];
				
				for(var i = 0; i < options.length; i++){				
					//this.shadowOptions.addOption([{label:options[i],value:options[i]}]);
					_options.push({label:options[i],value:options[i]});
				}
				this.shadowOptions.set("options",_options);
			}
			this.clearShadow();
		}else if(name == "disabled" || name == "readOnly"){
			this.shadowOptions.set(name,value);		
		}else{
			this.inherited(arguments);
		}
	}
	,reset1:function(name,value){
		if(name == "value"){
//			//console.log("TextShadowEditor reset value=",value);
//			this.shadowOptions.clearOptions();
			var v = value[this.htmlName];
			if(v){
				var options = v.split(","),_options = [];
				for(var i = 0; i < options.length; i++){				
//					this.shadowOptions.addOption([{label:options[i],value:options[i]}]);
					_options.push({label:options[i],value:options[i]});
				}
				this.shadowOptions.set("options",_options);
			}
			this.clearShadow();
		}else{
			this.inherited(arguments);
		}
	}
	,getShadow:function(){
		var value = this.hShadow.get("value")+" " + this.vShadow.get("value") +" " + this.blur.get("value") + " " + this.color.get("value");
		return value.replace(/null/g,"").trim();
	}
	,setShadow:function(value){	
		if(value && value != ""){
			this.isOnChangeActive = false;
			var v = value.split(" ");			
			//h-shadow
			this.hShadow.reset1("value",v[0] == null?"":v[0]);			
			//v-shadow
			this.vShadow.reset1("value",v[1] ==  null?"":v[1]);	
			
			if(v[2] != null){
				if (v[2].indexOf("px") == -1){
					this.color.reset1("value",v[2]);
					this.blur.reset1("value","");
				}else{
					this.color.reset1("value","");	
					this.blur.reset1("value",v[2]);
				}
			}			
			if(v[3] != null){
				this.color.reset1("value",v[3]);
			}
			
			this.isOnChangeActive = true;
		}else{						
			this.clearShadow();
		}		
	}
	,clearShadow:function(){
		this.isOnChangeActive = false;
		this.hShadow.reset1("value","");
		this.vShadow.reset1("value","");			
		this.blur.reset1("value","");
		this.color.reset1("value","");
		this.isOnChangeActive = true;
	}
	,isValid:function(){
		return this.hShadow.isValid() && this.vShadow.isValid() && this.blur.isValid() && this.color.isValid();
	}
[/@]
